<template>
  <div class="orderes">
  <el-row>
   <el-col :span="24">
     <span style="font-size: 20px; font-weight: bold;"> 订单记录</span>
   </el-col>
  </el-row>

  <el-table :data="Orders" style="width: 100%; margin: 10px; 0">
     <el-table-column label="下单时间" width="200" align="center">
       <template slot-scope="scope">
         <i class="el-icon-time"></i>
         <span style="margin-left: 10px">{{ scope.row.orderDate }}</span>
       </template>
     </el-table-column>
     <el-table-column  label="订单详情" width="400" align="center">
     <template slot-scope="scope">
       <span>订单编号：{{scope.row.orderNum}}</span>
     </template>
     </el-table-column>
     <el-table-column prop="receiveName" label="收货人" width="100" align="center"> </el-table-column>
     <el-table-column prop="price" label="金额" width="130" align="center"> </el-table-column>
     <el-table-column prop="state" label="状态" width="140" align="center"> </el-table-column>

     <el-table-column label="操作" align="center">
       <template slot-scope="scope">
         <el-button size="mini" v-if="scope.row.evaluate==0 && scope.row.state=='已出餐'"  @click="comment(scope.row)">评价</el-button>
          <el-button size="mini" type="danger" plain v-if="scope.row.state=='待付款'"  @click="cancel(scope.row)">取消订单</el-button>


       </template>
     </el-table-column>

     <el-table-column type="expand">
       <template slot-scope="props">
         <div v-for="food in props.row.items" style="margin-top:15px ;">
           <el-row>
             <el-col :span="4" :offset="1">
               <span style="font-size: 15px; ">{{food.foodName}}</span>
             </el-col>
             <el-col :span="3" :offset="8" style="font-weight: bold;">

               X<span style="margin-left: 5px; font-size: 17px; ">{{food.count}}</span>
             </el-col>
             <el-col :span="4" :offset="3">
               <span style="font-size: 16px;">{{food.price}}</span>
             </el-col>
           </el-row>

         </div>
         <el-row style="height: 30px; margin-top: 10px;">
           <el-col :span="3" :offset="1"><span style="font-size: 14px; color:dimgrey; margin: 10px; 0px">包装费:
               {{props.row.packPrice}}</span></el-col>
         </el-row>
         <el-row>
           <el-col :span="3" :offset="1"><span style="font-size: 14px; color:dimgrey;margin: 10px; 0px">配送费:
               {{props.row.packPrice}}</span></el-col>
         </el-row>
         <el-row>
           <el-col :span="4" :offset="19"><span style="font-size: 16px; font-weight: bold;">总价:
               {{props.row.price}}</span></el-col>
         </el-row>

       </template>
     </el-table-column>
   </el-table>

   <el-dialog
     title="评论订单"
     :visible.sync="commentWindow"
     width="30%"
     :before-close="handleClose">
     <el-row>
       <el-col :span="4" style="margin-top: 5px;">
         商铺评分
       </el-col>
       <el-col :span="10" style="margin-top: 5px;">
        <el-rate
          v-model="newComment.storeScore"
          show-text>
        </el-rate>
       </el-col>
     </el-row>
     <el-row>
       <el-col :span="4" style="margin-top: 5px;">
         菜品评分
       </el-col>
       <el-col :span="10" style="margin-top: 5px;">
        <el-rate
          v-model="newComment.dishesScore"
          show-text>
        </el-rate>
       </el-col>
     </el-row>
     <el-row>
       <el-col :span="4" style="margin-top: 5px;">
         配送评分
       </el-col>
       <el-col :span="10" style="margin-top: 5px;">
        <el-rate
          v-model="newComment.dphScore"
          show-text>
        </el-rate>
       </el-col>
     </el-row>
<!--     <el-row>
       <el-col :span="4" style="  margin-left: 10px; margin-top: 20px;">
       <el-upload
         class="avatar-uploader"
         action="http://localhost:8080/foodVariety/upload"
         :show-file-list="false"
         :on-success="handleAvatarSuccess"
         :before-upload="beforeAvatarUpload">
         <img v-if="newComment.filePath" :src="newComment.filePath" class="avatar">
         <i v-else class="el-icon-plus avatar-uploader-icon"></i>
       </el-upload>
       </el-col>
     </el-row> -->
     <el-row>
       <el-input
         type="textarea"
         style="margin-top: 5px;"
         :rows="2"
         placeholder="请输入评论内容"
         v-model="newComment.content">
       </el-input>
     </el-row>

     <span slot="footer" class="dialog-footer">
       <el-button @click="commentWindow = false">取 消</el-button>
       <el-button type="primary" @click="publish">确 定</el-button>
     </span>
   </el-dialog>
  </div>
</template>

<script>
   export default {
     name: 'Orderes',
     data(){
       return{
          Orders:{},
          commentWindow:false,
          newComment:{

          },
       }
     },
    methods:{

      cancel(obj){
        this.$http.get("/dietOrder/cancelOrder",{
          params:{
            orderNum:obj.orderNum,
          }
        }).then(resp=>{
          if(resp.data.code==200){
            console.log(resp.data.data);
            this.$message.success("取消订单成功！");
            this.getmyOrderes();
          }
        })
      },
      getmyOrderes(){
        this.$http.get("/dietOrder/showUserOrder").then(resp=>{
          if(resp.data.code==200){
            console.log(resp.data.data);
            this.Orders = resp.data.data;
          }
        })
      },
      comment(obj){
        this.newComment.storeId = obj.storeId;
        this.newComment.orderNum = obj.orderNum;
        this.commentWindow = true;
      },
      publish(){
        this.$http.post("/commentInfo/insert",this.newComment).then(resp=>{
          if(resp.data.code==200){
            alert(resp.data.message)
            this.commentWindow=false;
          }else{
            this.$message.error(resp.data.message);
          }
        })
      },
      handleAvatarSuccess(res, file){
        console.log(res)
        this.newComment.filePath = resp.data
        this.newComment.pictureFlag = 1
      },
      beforeAvatarUpload(file) {},

    },
    created(){
      this.getmyOrderes();
    }
   }

</script>

<style scoped>
  .orderes{
    background-color: rgb(239, 238, 230);
    padding: 20px;
  }

  .tittle{
     padding: 2px;
     background-color: #fff;
     font-size: 14px;
     box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
     color: darkgrey;
    font-weight: bold;
    margin: 10px;
     height: 35px;
     line-height: 35px;
  }
</style>
